<template>
	<view class='main-container'>
		<!--头部 搜索框开始-->
		<view class='search'>
			<view class='inp'>
				<image src='../../static/images/search1.png'></image>
				<input placeholder="搜索兼职" auto-focus v-model="searchValue" maxlength="15" />
				<image src='../../static/images/close1.png' v-if="searchValue.length!=0" @tap='clear'></image>
			</view>
			<text @tap='search'>搜索</text>
		</view>
		<view class="work" v-for="(item,index) in works" :key="index" @tap="go_work_detail(item.id)" v-if="isDis">
			<view class="top">
				<view class="left">
					<text style="overflow: hidden;
		white-space: nowrap;max-width: 84%;
		text-overflow: ellipsis;">{{item.jobName}}</text>
					<view class="type" >{{item.type}}</view>
				</view>
				<text class="right">¥{{item.price}}元</text>
			</view>
			<view class="bottom">
				<view class="bo" style="width: 70%;">
					<text style="color: #F7B952;font-size: 26upx;">{{item.maxPeople}}人</text>
					<text style="overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;">{{item.address}}</text></view>
				<view class="bo">
					<view class="remen">热门</view>
					<text>{{formatTime(item.endTime)}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import utils from "../../static/js/utils.js";
	export default {
		data() {
			return {
				works: [],
				isDis: false,
				searchValue: ''
			}
		},
		methods: {
			formatTime(timestamp) {
				var da = new Date(timestamp);
				return (da.getMonth() + 1) + "-" + da.getDate();
			},
			go_detail(id) {
				uni.navigateTo({
					url: 'workdetail?workId=' + id
				});
			},
			search() {
				this.doSearch(this.searchValue);
			},
			clear() {
				this.searchValue = '';
				this.isDis = false;
			},
			go_work_detail(workId){
				uni.navigateTo({
					url: 'workdetail?workId='+workId
				});
			},
			doSearch(value) {
				if (value.length == 0) {
					return;
				}
				utils.loading("搜索中...");
				this.isDis = true;
				let that = this;
				utils.get("job/search", {
					search: value
				}, function(data) {
					that.works = data;
				});
			}
		}

	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}

	.main-container {
		display: flex;
		width: 100%;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.search {
		width: 100%;
		height: 84upx;
		background-color: #FF6601;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
	}

	.inp {
		width: 650upx;
		height: 50upx;
		display: flex;
		flex-direction: row;
		background-color: white;
		align-items: center;
		margin-left: 20upx;
		border-radius: 8upx;
		font-size: 26upx;
	}

	.inp image {
		width: 48upx;
		height: 48upx;
	}

	.inp input {
		width: 554upx;
	}

	.search text {
		font-size: 28upx;
		margin-left: 10upx;
		color: white;
	}

	.work {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: center;
		height: 200upx;
		justify-content: space-between;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
	}
	
	.top {
		height: 90upx;
		width: 92%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	
	.left {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 80%;
	}
	
	.left text {
		font-size: 32upx;
		font-weight: 600;
	
	}
	
	.right {
		font-size: 30upx;
		color: #FF5924;
		font-weight: 600;
	
	}
	
	.type {
		padding: 4upx 8upx;
		font-size: 24upx;
		border: 1px solid #F7B952;
		margin-left: 15upx;
		border-radius: 6upx;
		color: #F7B952;
		margin-left: 20upx;
	
	}
	
	.bottom {
		width: 92%;
		height: 80upx;
		color: #999999;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 10upx;
		margin-bottom: 20upx;
	}
	
	.bo {
		font-size: 26upx;
		height: 80upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.remen {
		background: #ee3f4d;
		color: white;
		font-size: 22upx;
		padding: 4upx 8upx;
		border-radius: 6upx;
		text-align: center;
	}
</style>
